<template>
  <!--  搜索栏 -->
  <div class="app-container">
    <basic-search-form
      ref="vBasicSearchForm"
      style="margin-bottom: 8px"
      :columns="columns"
      inline
      size="small"
      @search="serach"
    >
      <template #shipType="{ formdata }">
        <el-select
          v-model="formdata.shipType"
          filterable
          placeholder="请选择"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in shipTypeList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
      <template #companyId="{ formdata }">
        <el-select
          v-model="formdata.companyId"
          filterable
          placeholder="请选择"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in companyList"
            :key="item.id"
            :label="item.companyNickName"
            :value="item.id"
          />
        </el-select>
      </template>
      <template #operatorId="{ formdata }">
        <el-select
          v-model="formdata.operatorId"
          filterable
          placeholder="请选择"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in operateList"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          />
        </el-select>
      </template>
      <template #createType="{ formdata }">
        <el-select v-model="formdata.createType" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in createTypeList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
      <template #authStatus="{ formdata }">
        <el-select v-model="formdata.authStatus" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in platformStatusList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
    </basic-search-form>

    <!-- 表格 -->
    <basic-table
      ref="vBasicTable"
      :api="shipList"
      :immediate-fetch="false"
      :before-fetch="beforeFetch"
      :table-schema="tableSchema"
      :actions="tableActions"
      :table-prop="tableProp"
      :table-event="tableEvent"
      :row-info="{
        rowKey: 'data',
      }"
    >
      <template #authStatusStr="{ row }">
        <div style="text-align: center">
          <el-tag type="success" size="small">{{ row.authStatusStr }}</el-tag>
        </div>
      </template>
      <!-- 表格上方按钮-->
      <template #tableHead="{ total }">
        <div>船舶统计：{{ total }}艘</div>
        <div style="height: 32px">
          <el-button size="mini" type="primary" @click="addShip">新增船舶</el-button>
          <el-button size="mini" @click="showUpdateCompanyDialog(null)">调整归属企业</el-button>
          <el-button size="mini" @click="handleExport">导出EXCEL</el-button>
        </div>
      </template>
    </basic-table>
    <!--  调整归属企业弹窗  -->
    <update-company-dialog
      :initial-selected-ship="selectedShip"
      :initial-selected-ships="selectedShips"
      :company-list="companyList"
      :is-visible.sync="isUpdateCompanyDialogVisible"
      @updateCompanyCallBack="handleUpdateCompanyCallBack"
    ></update-company-dialog>
  </div>
</template>

<script>
import { searchColumns, tableActions, tableSchema } from '@/views/platform/ship/list/modal.data';
import dayjs from 'dayjs';
import { download } from '@/utils/request';
import { shipList } from '@/api/ship';
import {
  shipTypeEnum,
  getCompanyList,
  getOperateList,
  createTypeEnum,
  authStatusEnum,
} from '@/api/common';
import UpdateCompanyDialog from '@/views/platform/ship/list/components/UpdateCompanyDialog.vue';

export default {
  components: { UpdateCompanyDialog },
  data() {
    return {
      columns: searchColumns(this),
      tableSchema: tableSchema,
      tableActions: tableActions(this.getShipDetail, this.updateShip, this.showUpdateCompanyDialog),
      tableProp: {},
      tableEvent: {
        'selection-change': (selection) => {
          this.selectedShips = selection.map((item) => item.id);
        },
      },
      queryParams: {},
      detail: {},
      shipTypeList: [],
      companyList: [],
      operateList: [],
      createTypeList: [],
      platformStatusList: [],
      isShowUpdateCompanyDialog: false,
      selectedShip: {},
      selectedShips: [],
      isUpdateCompanyDialogVisible: false,
    };
  },
  mounted() {
    this.getShipTypeList();
    this.getCompanyList();
    this.getOperateList();
    this.getCreateTypeList();
    this.getPlatformStatusList();
    this.$refs.vBasicSearchForm.search();
  },
  methods: {
    shipList,
    serach(form) {
      this.queryParams = { ...form };
      this.$refs.vBasicTable.fetch();
    },
    beforeFetch() {
      let query = {
        ...this.queryParams,
        createBeginTime:
          (this.queryParams.date?.[0] && dayjs(this.queryParams.date[0]).format('YYYY-MM-DD')) ||
          null,
        createEndTime:
          (this.queryParams.date?.[0] && dayjs(this.queryParams.date[1]).format('YYYY-MM-DD')) ||
          null,
      };
      delete query.date;
      return query;
    },
    /**
     * 详情
     * @param row
     */
    getShipDetail(row) {
      this.$router.push({ name: 'ShipDetail', query: { id: row.id } });
    },
    /**
     * 新增
     */
    addShip() {
      this.$router.push({ name: 'SaveShip' });
    },
    /**
     * 编辑
     * @param row
     */
    updateShip(row) {
      this.$router.push({ name: 'SaveShip', query: { id: row.id } });
    },
    showUpdateCompanyDialog(ship) {
      if (ship === null && this.selectedShips.length === 0) {
        this.$message.error('请先选择一条或多条船舶');
        return;
      }
      if (this.selectedShips.length === 0) {
        this.selectedShip = ship;
      }
      this.isUpdateCompanyDialogVisible = true;
    },
    handleUpdateCompanyCallBack() {
      this.isUpdateCompanyDialogVisible = false;
      // 更新完成后的回调，比如刷新船舶列表等
      this.selectedShip = null;
      this.selectedShips = [];
      this.$refs.vBasicTable.fetch();
    },

    /**
     * 获取船舶类型下拉列表
     */
    getShipTypeList() {
      shipTypeEnum().then((res) => {
        this.shipTypeList = res.data;
      });
    },
    /**
     * 获取归属企业下拉列表
     */
    getCompanyList() {
      getCompanyList().then((res) => {
        this.companyList = res.data;
      });
    },
    /**
     * 获取归属运营商下拉列表
     */
    getOperateList() {
      getOperateList().then((res) => {
        this.operateList = res.data.operateList;
      });
    },
    /**
     * 获取创建方式下拉列表
     */
    getCreateTypeList() {
      createTypeEnum().then((res) => {
        this.createTypeList = res.data;
      });
    },
    /**
     * 获取平台状态下拉列表
     */
    getPlatformStatusList() {
      authStatusEnum().then((res) => {
        this.platformStatusList = res.data;
      });
    },
    /**
     * 导出
     */
    handleExport() {
      download('/ship/export', { ...this.queryParams }, `船舶列表_${new Date().getTime()}.xlsx`);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f1f1f1;
}
</style>
